<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
		<!-- 引入可以直接使用动画的link -->
		<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css"/>
		<style>
			
			.box{
				width: 1200px;
				height: 600px;
				margin-left: auto;
				margin-right: auto;
				display: flex;/* 弹性布局 */
				justify-content: center;
				align-items: center;
				background-image: repeating-linear-gradient(white ,lightblue,white);/* 背景使用渐变 */
				
			}
			.form {
				width: 500px;
				height: 260px; 
				background-color: lightblue;
				display: flex;
				justify-content: center;
				align-items: center;
				
			  }
			
			input {
			  width: 400px;
			  height: 32.5px;
			  margin: 0px 50px;
			  margin-top: 20px;
			  font-size: 14.11765px;
			  line-height: 32.5px;
			  position: relative;
			  }
			 p{
				 margin-top: -50px;
			 }
			
			form button {
			  width: 200px;
			  height: 34.21053px;
			  color: #fff;
			  font-weight: bold;
			  background-color: darkslategrey;
			  position: absolute;
			  margin-bottom: -150px;
			  }
			.btn button{
				width: 300px;
				height: 50px;
				font-size: 20px;
				color: #fff;
				font-weight: bold;
				background-color: cadetblue;
				
			}
		</style>
	</head>
	<body><!-- 209010214豆雪琴 -->
		<div id="root">  <!-- 创建根组件 -->
			
			<main-anim></main-anim>
			
		</div>
	</body>
	<script> 
		const { ref } = Vue; //创建响应式
		const app=Vue.createApp({});
		// 创建全局组件
		app.component("main-anim",{
			template:`
			<div class="box">
			<transition enter-active-class="animate__animated animate__wobble" leave-active-class="animate__animated animate__shakeX">					
					<form class="form" v-show="show">
					<p >
					<input type="email" placeholder="&ensp;&ensp;邮箱:">
					<input type="text" placeholder="&ensp;&ensp;密码:">
					</p>
					<button>登录</button>
					</form>
					
			</transition>
					<div class="btn">
						<button @click="HiddenClick" v-show="!show">请在此处点击登录</button>
					</div>
			</div>
					
					
				`,
			setup(){
				let show= ref(false);
				const HiddenClick=()=>{
					show.value =! show.value;//在组合式API中要用value
				}
				return{   //必须将用到的变量函数return出来
					show,
					HiddenClick,
				}
			}
		})
		app.mount('#root');
	</script>
</html>
